import { Component } from '@angular/core';
import {
  RouterLink,
  RouterLinkActive,
  RouterOutlet,
} from '@angular/router';
import { Animal } from '../animal';

@Component({
  selector: 'app-child-a',
  standalone: true,
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  template: `
    <div
      class="py-1 border-2 border-green-500 border-dashed rounded-md text-center"
    >
      Child A: {{ animal.name }}
    </div>

    <section class="flex justify-around">
      <span class="flex flex-col items-center">
        <p class="m-2">⬇️</p>
        <router-outlet />
      </span>
    </section>
  `,
  styles: ``,
})
export class ChildAComponent {
  constructor(public animal: Animal) {}
}
